<template>
  <!--
  props与emit
  父传子:单向数据流（所有传入的值的修改都在父进行）
     传
       <xxx :aaa="parentAaa" num='123' />
     收:xxx子组件接收
       props:['aaa','num']
       props:{
        aaa:{
          type:'类型:String,Number....'  多个:[Number,String],
          default:
               基本数据类型：Number,String,Boolean,null,undefined
                  默认值：直接写
               复杂数据类型：Object,Array,Function
                  默认值:()=>{return 复杂数据类型默认值}
          required:boolean true必传  false:可传可不传
          validator:(value)=>{
            // 对传入的值做验证
            return boolean  true:验证通过  false:验证失败
          }
        }
       }
   子传父 ：子组件触发一个父组件的方法
     绑定：  <xxx @fn="parentFn" />
     触发：  子组件内：this.$emit('fn',实参值)
   v-model
      <xxx :value="appValue" @input="appValue=$event" />
      <xxx v-model="appValue" />
      xxx.vue
        props:['value'],
        model:{
          prop:'value',
          event:'input',
        }
        this.$emit('input',实参值)
   .sync
     <xxx :xxxnum="appNum" @update:xxxnum="appNum=$event" />
     <xxx :xxxnum.sync="appNum" />
     xxx.vue
        props:['xxxnum']
        this.$emit('update:xxxnum',实参值)
 -->
  <div>
    我是父组件
    <hr />
    {{ parentmsg }}---
    <h3>.sync使用:{{ appNum }}</h3>
    <HmSon2
      :num="num"
      @setNum="parentSetNum"
      :isShow="show"
      @setShow="show = false"
      v-model="parentmsg"
      :xxxnum.sync="appNum"
    ></HmSon2>
    <!--
      v-model
      :value="parentmsg"
      @input="parentmsg = $event"
      .sync
       :xxxnum="appNum"
      @update:xxxnum="appNum = $event"
      -->
  </div>
</template>
<script>
import HmSon2 from './components/HmSon2.vue'
export default {
  data () {
    return {
      num: 10,
      show: false,
      parentmsg: '这是一个寂寞的天',
      appNum: 100
    }
  },
  components: {
    HmSon2
  },
  methods: {
    parentSetNum (n) {
      this.num = n
    }
  }
}
</script>
<style></style>
